<template>
	<div class="main">
		<h1 class="title">
			{{t('page.user.login.form.title')}}
		</h1>
		<el-form :model="modelRef" :rules="rulesRef" ref="formRef">
			<el-form-item label="" prop="username">
				<el-input v-model="modelRef.username" :placeholder="t('page.user.login.form-item-username')"
					@keydown.enter="handleSubmit">
					<template #prefix>
						<i class="el-input__icon">
							<icon-svg type="user"></icon-svg>
						</i>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="" prop="password">
				<el-input v-model="modelRef.password" type="password"
					:placeholder="t('page.user.login.form-item-password')" @keydown.enter="handleSubmit">
					<template #prefix>
						<i class="el-input__icon">
							<icon-svg type="pwd"></icon-svg>
						</i>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="" prop="captcha">
				<div class="vPicBox">
					<el-input v-model="modelRef.captcha" :placeholder="t('page.user.login.form-item-captcha')"
						@keydown.enter="handleSubmit" style="width: 60%;float: left;">
						<template #prefix>
							<i class="el-input__icon">
								<icon-svg type="pwd"></icon-svg>
							</i>
						</template>
					</el-input>
					<div class="vPic">
						<img :src="picPath" alt="请输入验证码" @click="loginVerify()">
					</div>
				</div>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" class="submit" @click="handleSubmit" :loading="submitLoading">
					{{t('page.user.login.form.btn-submit')}}
				</el-button>
				<div class="text-align-right">
					<router-link to="/user/register">
						{{t('page.user.login.form.btn-jump')}}
					</router-link>
				</div>
			</el-form-item>

			<el-alert v-if="loginStatus === 'error' && !submitLoading" :title="t('page.user.login.form.login-error')"
				type="error" show-icon :closable="false" />

		</el-form>
	</div>
</template>
<script lang="ts">
	import {
		computed,
		defineComponent,
		reactive,
		ref,
		Ref,
		ComputedRef
	} from "vue";
	import {
		useRouter
	} from 'vue-router';
	import {
		useI18n
	} from "vue-i18n";
	import {
		arrowMiddleware,
		ElForm,
		ElMessage
	} from 'element-plus';
	import IconSvg from "@/components/IconSvg";
	import {
		LoginParamsType
	} from "@/model/LoginParamsType";
	import {
		useUserStore
	} from '@/store/user';
	import {
		accountAaptcha
	} from './service'

	interface UserLoginSetupData {
		t: (key: string | number) => string;
		modelRef: LoginParamsType;
		rulesRef: any;
		formRef: Ref < typeof ElForm | undefined > ;
		submitLoading: Ref < boolean > ;
		handleSubmit: () => Promise < void > ;
		loginStatus: ComputedRef <boolean > ;
	}

	export default defineComponent({
		name: 'UserLogin',
		components: {
			IconSvg
		},
		setup(): UserLoginSetupData {
			const router = useRouter();
			const {
				currentRoute
			} = router;
			const store = useUserStore()
			const {
				t
			} = useI18n();
			const loginVerify = () => {

				
				
				accountAaptcha().then((data) => {
					// picPath.value = "data:image/png;base64," + arrayBufferToBase64(data) ;
					 const blob = new Blob([data], { type: 'image/png' });
					  picPath.value = URL.createObjectURL(blob);
				})
			}

			// 表单值
			const modelRef = reactive < LoginParamsType > ({
				username: 'admin',
				password: '123456',
				captcha: ''
			});
			// 表单验证
			const rulesRef = reactive({
				username: [{
					required: true,
					message: t('page.user.login.form-item-username.required'),
				}, ],
				password: [{
					required: true,
					message: t('page.user.login.form-item-password.required'),
				}, ],
				captcha: [{
					required: true,
					message: t('page.user.login.form-item-captcha.required'),
				}, ],
			});
			// form
			const formRef = ref < typeof ElForm > ();
			// 登录loading
			const submitLoading = ref < boolean > (false);
			// 登录
			const handleSubmit = async () => {
				submitLoading.value = true;
				try {


					const valid: boolean = formRef.value ? await formRef.value.validate() : false;

					if (valid === true) {

						const res: Boolean = await store.login(modelRef);
						if (res === true) {
							await store.info()
							ElMessage.success(t('page.user.login.form.login-success'));

							const {
								redirect,
								...query
							} = currentRoute.value.query;
							if (!redirect) {
								  await router.push({ name:'workplace' })
							}
							router.replace({
								path: redirect as string || '/',
								query: {
									...query
								}
							});
						} else {
							loginVerify()
						}


					} else
						loginVerify()


				} catch (error) {
					// console.log(error);
					ElMessage.warning(t('app.global.form.validatefields.catch'));
				}
				submitLoading.value = false;
			}

			// 登录状态
			const loginStatus = computed < boolean > (() => store.$state.loginStatus);

			const picPath = ref('')

			loginVerify()

			return {
				t,
				modelRef,
				rulesRef,
				formRef,
				submitLoading,
				handleSubmit,
				loginStatus,
				picPath,
				loginVerify
			}
		}
	})
</script>
<style lang="scss" scoped>
	.main {
		flex: none;
		width: 348px;
		padding: 36px;
		margin: 0 auto;
		border-radius: 4px;
		background-color: rgba(255, 255, 255, 0.2);

		.title {
			font-size: 28px;
			margin-top: 0;
			margin-bottom: 30px;
			text-align: center;
			color: #ffffff;
			/* background-image:-webkit-linear-gradient(right,#FFFFFF,#009688, #FFFFFF); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color:transparent; */
		}

		.submit {
			width: 100%;
		}

		.vPicBox {
			display: flex;
			justify-content: space-between;
			width: 100%;
		}

		.vPic {
			width: 33%;
			height: 38px;
			background: #ccc;

			img {
				width: 100%;
				height: 100%;
				vertical-align: middle;
			}
		}
	}
</style>
